<template>
	<view class="w100p common_wrap">
    <CommonHeader :title="$t('订单记录')" backgroundColor="#fff"></CommonHeader>

		<!-- 积分总计 -->
		 <view class="point-total">
			<view class="txt">{{$t('赚到的积分')}}</view>
			<view class="point">{{total}}{{$t('积分')}}</view>
		 </view>
		<view class="w100p pr list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="w100p scroll-Y" refresher-enabled="true"
				@scrolltolower="lower" @refresherrefresh="fresh" refresher-background="transparent"
				:refresher-triggered="isRefresher" @refresherrestore="store" @touchmove.stop>
				<view style="height: 20rpx;"></view>

				<view class="list-wrapp">
					<view class="list" v-for="(item,index) in [infoList]" :key="index">
						<view class="top-sec">
							<view class="name">{{ item.title }}</view>
							<view class="time">{{ item.start_time }}~{{ item.close_time }}</view>
						</view>
						<view class="bottom-section">
							<view class="ti">{{$t('服务整体评级')}}</view>
							<view class="start">
								<uni-rate :value="4.0" size="20" margin="8" activeColor="#FF8318"
								color="#DBDBDB" />
							</view>
							<view class="icons">
								<view :class="{'btn-icon': true,'active': item.evaluate == 4 || item.evaluate == 5}">
									{{$t('服务体验好')}}
									<image
										src="/static/caigou/xiaolian.png"
									/>
								</view>
								<view :class="{'btn-icon': true,'active': item.evaluate == 2 || item.evaluate == 3}">
									{{$t('服务一般')}}
									<image
										src="/static/caigou/xiaolian.png"
									/>
								</view>
								<view :class="{'btn-icon': true,'active': item.evaluate == 1}">
									{{$t('服务体验差')}}
									<image
										src="/static/caigou/xiaolian.png"
									/>
								</view>
							
							</view>
						</view>
					</view>

				</view>

				<!--  -->
				<!-- <u-empty :text="$t('暂无数据')" text-size="28" v-if="infoList.length === 0" /> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>


import CommonHeader from "@/pages/translate/components/common-header.vue";
import { message_board_info } from '@/api/state.js';
import {
	mapState
} from 'vuex';
export default {
	components: {
		CommonHeader
	},
	computed: {
		// 使用mapState生成计算属性
		// ...mapState({
		// 	lang: state => state.commonData.lang,
		// })
	},
	watch: {
		lang(newValue, oldValue) {
			console.log('lang changed:', newValue);
		},
	},
	data() {
		return {
			listUnits: [],

			// 分页相关
			scrollTop: 0,
			isRefresher: false,
			page: 1,
			isData: false, // 是否禁用上拉加载

			keyword: '',
			cate_id: '',
			infoList: [,,,],
			statusBarHeight: uni.getStorageSync("statusBarHeight"),
			total: 0,

		}
	},
	onLoad(val) {
		this.getData();
	},

	methods: {
		getImg(arr) {
			if (arr.length) {
				return this.getImageUrl(arr[0].path)
			}
			return '/static/caigou/nothing.png';

		},

		// 触底加载
		lower() {
			if (this.isData) return;
			this.page++;
			this.getData();
		},
		// {{$t('下拉刷新')}}触发
		fresh() {
			this.page = 1;
			this.isRefresher = true;
			this.isData = false;
			this.getData();
		},
		// {{$t('下拉刷新')}}复位
		store() {
			this.isRefresher = false;
		},
		// 获取{{$t('列表')}}
		async getData() {
			uni.showLoading({
				title: 'loading...',
			})
			try {
				let res = await message_board_info({
					page: this.page,
					id: 2621,
				})
				this.isRefresher = false;
				if (res.data.code == 200) {
					let data = res.data.data.data || []
					// 分成两列

					if (this.page == 1) {
						this.infoList = data
						this.total = res.data.data.total || 0;
					} else {

						this.infoList = [...this.infoList, ...data]
					}
					if (data.length < 10) {
						this.isData = true;
					}
				} else {
					this.isData = true;
				}
				uni.hideLoading({})

			} catch (error) {
				this.isRefresher = false;
				uni.hideLoading({})
			}
		},
	}
}
</script>

<style scoped lang="scss">
@import '@/pages/translate/common/common.scss';
@import './index.scss';
</style>


<style lang="scss">
.key-xxxinput-placeholder {
	color: #8C8C8C;
	font-size: 26rpx;
	font-weight: 400;

}
</style>